<template>
  <div class="app-container">
    <el-form :model="queryParams"
             ref="queryForm"
             size="small"
             :inline="true"
             v-show="showSearch"
             label-width="68px">
      <el-form-item label="运单号"
                    prop="waybillId">
        <el-input v-model="queryParams.waybillId"
                  placeholder="请输入运单号"
                  clearable
                  @keyup.enter.native="handleQuery" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary"
                   icon="el-icon-search"
                   size="mini"
                   @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh"
                   size="mini"
                   @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    
    <el-table v-loading="loading"
              :data="DriverCheckList">
      <el-table-column label="合同号"
                       align="center"
                       prop="id" />
      <el-table-column label="运单号"
                       align="center"
                       prop="waybillId" />
      <el-table-column label="运费"
                       align="center"
                       prop="money" />
      <el-table-column label="保险费"
                       align="center"
                       prop="insurance" />
      <el-table-column label="里程"
                       align="center"
                       prop="distance" />
      <el-table-column label="预计到达时间"
                       align="center"
                       prop="estimatedArrival" />
      <el-table-column label="接货时间"
                       align="center"
                       prop="acceptTime" />
      <el-table-column label="到达时间"
                       align="center"
                       prop="arrivalTime" />
      <el-table-column label="收货时间"
                       align="center"
                       prop="receivedTime" />
      <el-table-column label="接货地址"
                       align="center"
                       prop="acceptAddress" />
      <el-table-column label="收货地址"
                       align="center"
                       prop="receivedAddress" />
      <el-table-column label="运输状态"
                       align="center"
                       prop="status">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.accept_waybill_status"
                    :value="scope.row.status" />
        </template>
      </el-table-column>
      <el-table-column label="司机验收状态"
                       align="center"
                       prop="drivercheckStatus">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.drivercheck_status"
                    :value="scope.row.drivercheckStatus" />
        </template>
      </el-table-column>
      <el-table-column label="操作"
                       align="center"
                       class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini"
                     type="text"
                     icon="el-icon-circle-check"
                     @click="handleUpdate(scope.row)">验收确认</el-button>

          <el-button size="mini"
                     type="text"
                     icon="el-icon-s-order"
                     @click="handleErrorSet(scope.row)">差错记录</el-button>
          <el-button size="mini"
                     type="text"
                     icon="el-icon-view"
                     @click="handleSeeReceipt(scope.row)">查看回执单</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0"
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getList" />

    <!-- 验收添加回执对话框 -->
    <el-dialog :title="title"
               :visible.sync="open"
               width="500px"
               append-to-body>
      <el-form ref="form"
               :model="form"
               label-width="80px">
        <el-form-item label="合同编号"
                      prop="contractId">
          <el-input v-model="form.contractId"
                    disabled="true"
                    placeholder="请输入合同编号" />
        </el-form-item>

        <el-form-item label="验收明细"
                      :rules="[
      { required: true, message: '验收明细不能为空'}
    ]"
                      prop="acceptanceRecords">
          <el-input v-model="form.acceptanceRecords"
                    type="textarea"
                    rows="5"
                    placeholder="请输入内容" />
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button type="primary"
                   @click="handleSure('form')">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 差错记录对话框 -->
    <el-dialog :title="errortitle"
               :visible.sync="erroropen"
               width="850px"
               append-to-body>

      <el-descriptions class="margin-top"
                       :column="3">
        <template slot="extra">
          <el-button type="primary"
                     plain
                     icon="el-icon-plus"
                     size="mini"
                     @click="handleAddError">新增差错记录</el-button>
        </template>
        <el-descriptions-item label="合同编号">{{ErrorList.contractId}}</el-descriptions-item>
        <el-descriptions-item label="运单id">{{ErrorList.aWaybill.waybillId}}</el-descriptions-item>
        <el-descriptions-item label="运单编号">{{ErrorList.aWaybill.waybillNumber}}</el-descriptions-item>
        <el-descriptions-item label="差错类型"
                              v-for="dict in dict.type.error_type"
                              v-if="dict.value==ErrorList.errorType">
          <el-tag :type="dict.raw.listClass">{{dict.label}}</el-tag>
        </el-descriptions-item>

        <el-descriptions-item label="差错描述">{{ErrorList.errorDescription}}</el-descriptions-item>

        <el-descriptions-item label="发货人名字">{{ErrorList.aWaybill.senderName}}</el-descriptions-item>
        <el-descriptions-item label="发货人手机">{{ErrorList.aWaybill.senderMobile}}</el-descriptions-item>
        <el-descriptions-item label="发货人地址">{{ErrorList.aWaybill.senderAddr}}</el-descriptions-item>
        <el-descriptions-item label="收货人名字">{{ErrorList.aWaybill.receiverName}}</el-descriptions-item>
        <el-descriptions-item label="收货人手机">{{ErrorList.aWaybill.receiverMobile}}</el-descriptions-item>
        <el-descriptions-item label="收货人地址">{{ErrorList.aWaybill.receiverAddr}}</el-descriptions-item>
        <el-descriptions-item label="预计发货时间">{{ErrorList.aWaybill.deliveryTime}}</el-descriptions-item>
        <el-descriptions-item label="货物重量">{{ErrorList.aWaybill.goodsWeight}} kg</el-descriptions-item>
        <el-descriptions-item label="运费">￥{{ErrorList.aWaybill.freight}}</el-descriptions-item>
        <el-descriptions-item label="里程">{{ErrorList.aWaybill.distance}} km</el-descriptions-item>
        <el-descriptions-item label="预计到货时间">{{ErrorList.aWaybill.estimatedArriveTime}}</el-descriptions-item>

      </el-descriptions>
      <el-descriptions class="margin-top"
                       :column="1"
                       direction="vertical">
        <!-- 图片 -->
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-picture"></i>
            截图
          </template>
          <div class="demo-image__lazy">
            <el-image v-for="url in ErrorList.imgList"
                      :key="url"
                      :src="url"
                      :preview-src-list="ErrorList.imgList"
                      lazy
                      style="width: 150px; height: 150px">
              <div slot="placeholder"
                   class="image-slot">
                加载中<span class="dot">...</span>
              </div>
            </el-image>
          </div>
        </el-descriptions-item>
      </el-descriptions>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="errorclose">关 闭</el-button>
      </div>

    </el-dialog>
    <!-- 新增差错记录对话框 -->
    <el-dialog :title="inserterrortitle"
               :visible.sync="inserterroropen"
               width="750px"
               append-to-body>
      <el-form ref="inserterrorform"
               :model="inserterrorform"
               label-width="100px">
        <el-form-item label="运输合同编号"
                      prop="contractId">
          <el-input v-model="inserterrorform.contractId"
                    disabled="true"
                    placeholder="请输入合同编号" />
        </el-form-item>
        <el-form-item label="差错类型"
                      prop="errorType">
          <el-select v-model="inserterrorform.errorType"
                     filterable
                     placeholder="请选择">
            <el-option v-for="item in dict.type.error_type"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="上传现场图片"
                      prop="">
          <!-- 图片 -->
          <el-upload multiple
                     :auto-upload="false"
                     list-type="picture-card"
                     :on-change="handleAvatarSuccess"
                     :on-remove="handleImg"
                     :file-list="imageList">
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>

        <el-form-item label="差错描述"
                      :rules="[
      { required: true, message: '差错描述不能为空'}
    ]"
                      prop="errorDescription">
          <el-input v-model="inserterrorform.errorDescription"
                    type="textarea"
                    rows="5"
                    placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="回执描述"
                      :rules="[
      { required: true, message: '回执描述不能为空'}
    ]"
                      prop="acceptanceRecords">
          <el-input v-model="inserterrorform.acceptanceRecords"
                    type="textarea"
                    rows="5"
                    placeholder="请输入内容" />
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button type="primary"
                   @click="handleinserterrorSure('form')">确 定</el-button>
        <el-button @click="inserterrorcancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listDriverCheck,
  addReceipt,
  updateDriverCheck,
  listError,
  insertError,
  uploadErrorImgs,
} from '@/api/driveracc/drivercheck'

export default {
  name: 'Post',
  dicts: ['accept_waybill_status', 'drivercheck_status', 'error_type'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 岗位表格数据
      DriverCheckList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        waybillId: '',
      },
      // 表单参数
      form: {},
      // 差错记录相关
      erroropen: false,
      errortitle: '',
      // 新增差错记录相关
      inserterroropen: false,
      inserterrortitle: '',
      //查看回执传递的合同id
      cid: '',
      inserterrorform: {},
      ErrorList: {
        aWaybill: { waybillId: '' },
      },
      imageList: [],
    }
  },
  created() {
    this.getList()
  },
  methods: {
    /** 查询需验收列表 */
    getList() {
      this.loading = true
      listDriverCheck(this.queryParams).then((response) => {
        this.DriverCheckList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        contractId: undefined,
        acceptanceRecords: undefined,
      }
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.waybillId = ''
      this.handleQuery()
    },
    /** 新增回执按钮操作 */
    handleUpdate(row) {
      this.reset()
      this.form.contractId = row.id
      this.form.waybillId = row.waybillId
      this.open = true
      this.title = '货物验收'
    },
    /** 确认验收操作 */
    handleSure(form) {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.$confirm(
            '是否确认本次货物验收？验收后将会短信形式通知发货客户和收货客户'
          )
            .then((_) => {
              updateDriverCheck(this.form).then((response) => {
                this.open = false
                this.$modal.msgSuccess('验收成功!')
                this.getList()
              })
            })
            .catch((_) => {})
        }
      })
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        'system/post/export',
        {
          ...this.queryParams,
        },
        `post_${new Date().getTime()}.xlsx`
      )
    },
    /** 差错记录操作 */
    handleErrorSet(row) {
      this.ErrorList = { aWaybill: { waybillId: '' } }
      this.inserterrorform.contractId = row.id
      this.inserterrorform.waybillId = row.waybillId
      this.form.contractId = row.id
      this.form.waybillId = row.waybillId
      this.erroropen = true
      this.errortitle = '差错记录'
      //请求差错记录代码
      this.selectError(this.form)
    },
    /** 请求差错记录代码 */
    selectError(form) {
      //请求差错记录代码
      listError(form)
        .then((response) => {
          this.ErrorList = response
          let arr = response.aErrorImages
          this.ErrorList.imgList = response.aErrorImages
          //截图封面
          // this.url = arr[0].path

          console.log(response)
          // console.log(this.ErrorList.imgList)
        })
        .catch((_) => {})
    },
    /** 新增差错记录按钮操作 */
    handleAddError() {
      //请求差错类型代码
      this.inserterroropen = true
      this.inserterrortitle = '新增差错记录'
    },
    /** 新增差错记录按钮确定操作 */
    handleinserterrorSure() {
      this.$refs['inserterrorform'].validate((valid) => {
        if (valid) {
          // //新增差错请求
          console.log(this.inserterrorform.contractId)
          insertError(this.inserterrorform)
            .then((response) => {
              this.$modal.msgSuccess('新增成功!')
              this.inserterroropen = false
              this.inserterrorform = {}
              //重新加载差错记录
              this.selectError(this.form)
              this.getList()
            })
            .catch((_) => {})
          // 封装图片
          let formData = new FormData()
          let arr = this.imageList
          for (var i = 0; i < arr.length; i++) {
            formData.append('file', arr[i].raw)
          }
          formData.append('contractId', this.inserterrorform.contractId)
          // 上传图片
          setTimeout(
            uploadErrorImgs(formData)
              .then((response) => {
                this.$modal.msgSuccess('上传图片成功!')
                this.selectError(this.form)
              })
              .catch((_) => {}),
            1000
          )
          // uploadErrorImgs(formData)
          //   .then((response) => {
          //     this.$modal.msgSuccess('上传图片成功!')
          //     this.selectError(this.form)
          //   })
          //   .catch((_) => {})
        }
      })
    },
    // 新增差错记录取消按钮
    inserterrorcancel() {
      this.inserterroropen = false
      this.inserterrorform = {}
    },
    // 查看回执单
    handleSeeReceipt(row) {
      //跳转页面以及传值
      this.cid = row.id
      this.$router.push({ path: 'receipt' })
      var that = this
      setTimeout(function () {
        that.$nextTick(function () {
          this.$bus.emit('thebus', this.cid)
        })
      }, 600)
    },
    // 取消按钮
    errorclose() {
      this.erroropen = false
    },
    handleAvatarSuccess(file, fileList) {
      // response表示上传结果
      // file表示当前上传的文件
      // fileList表示当前成功上传的图片数组
      // 将图片保存
      this.imageList = fileList
      console.log(this.imageList)
    },
    // 删除图片
    handleImg(file, fileList) {
      // file代表将要删除的文件
      // fileList为删除此图片之后剩下的图片列表
      // 更新
      this.imageList = fileList
      console.log(this.imageList)
    },
  },
}
</script>